<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="./images/favicon.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<title>管理员界面</title>
<style>
	*{
		padding: 0px;
		margin: 0px;
		border: 0px;
	}
	.managebox{
		width: 100%;
		height: 700px;
		background-image: url(img/shijing.png);
	}
	.leftbox{
		width: 20%;
		height: 700px;
		float: left;
		background-color: white;
	}
	.rightbox{
		width: 80%;
		height: 700px;
		float: left;
		background-color: gainsboro;
	}
	a{
		background-color: gainsboro;
		text-decoration: none;
	}
</style>
</head>
<body>
<div class="managebox">
	<!--左边框-->
	
	<div class="leftbox">
		<center style="color: dodgerblue;">头像：<img src="img/shijing.png" width="200px" height="200px" class="img-thumbnail"></center>
		<div class="panel-group" id="accordion">
    <!--
    	用户管理按钮
    -->
    <div class="panel panel-default" align="center" style="margin-top: 50px;">
        <div class="panel-heading">
            <h5 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne" onclick="document.getElementById('btn1').style.display='block';document.getElementById('btn2').style.display='none'">
                	用户管理
                </a>
            </h5>
        </div>
        <!--
        	增删查三个按钮
        -->
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="btn-group-vertical">
				<button type="button" class="btn btn-default">
					<a data-toggle="collapse" data-parent="#accordion" 
                	href="#collapseTwo" href="#" onclick="document.getElementById('queryUser').style.display='block';document.getElementById('updateUser').style.display='none';document.getElementById('deleteUser').style.display='none'">查询用户</a>
				</button>
				<button type="button" class="btn btn-default">
					<a data-toggle="collapse" data-parent="#accordion" 
                	href="#collapseTwo" href="#" onclick="document.getElementById('updateUser').style.display='block';document.getElementById('queryUser').style.display='none';document.getElementById('deleteUser').style.display='none'">更新用户</a>
				</button>
				<button type="button" class="btn btn-default">
					<a data-toggle="collapse" data-parent="#accordion" 
                	href="#collapseTwo" href="#" onclick="document.getElementById('deleteUser').style.display='block';document.getElementById('updateUser').style.display='none';document.getElementById('queryUser').style.display='none'">删除用户</a>
				</button>
            	
            </div>
        </div>
    </div>
    <!--
    	信息管理三个按钮
    -->
    <div class="panel panel-default" align="center" style="margin-top: 20px;">
        <div class="panel-heading">
            <h5 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo" onclick="document.getElementById('btn2').style.display='block';document.getElementById('btn1').style.display='none'">
                	信息管理
            	</a>
            </h5>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <div class="btn-group-vertical">
				<button type="button" class="btn btn-default">
					<a data-toggle="collapse" data-parent="#accordion" 
                	href="#collapseTwo" href="#" onclick="document.getElementById('queryInfo').style.display='block';document.getElementById('updateInfo').style.display='none';document.getElementById('deleteInfo').style.display='none'">查询信息</a>
				</button>
				<button type="button" class="btn btn-default">
					<a data-toggle="collapse" data-parent="#accordion" 
                	href="#collapseTwo" href="#" onclick="document.getElementById('updateInfo').style.display='block';document.getElementById('queryInfo').style.display='none';document.getElementById('deleteInfo').style.display='none'">更新信息</a>
				</button>
				<button type="button" class="btn btn-default">
					<a data-toggle="collapse" data-parent="#accordion" 
                	href="#collapseTwo" href="#" onclick="document.getElementById('deleteInfo').style.display='block';document.getElementById('updateInfo').style.display='none';document.getElementById('queryInfo').style.display='none'">删除信息</a>
				</button>
            </div>
        </div>
        </div>
    </div>
   
</div>
	</div>
	<!--
    	右边框
    -->
    
	<div class="rightbox" >
		<div id="btn1">
			<div id="queryUser">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#">用户管理</a></li>
				<li style="margin-left: 10px;background-color:dodgerblue;"><a href="#">查询用户</a></li>
			</ul>
			</div>
			<div id="updateUser">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#">用户管理</a></li>
					<li style="margin-left: 10px;background-color:dodgerblue;"><a href="#" >更新用户</a></li>
				</ul>
			</div>
			<div id="deleteUser">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#">用户管理</a></li>
					<li style="margin-left: 10px;background-color:dodgerblue;"><a href="#">删除用户</a></li>
				</ul>
			</div>
		</div>
		<div id="btn2">
			<div id="queryInfo">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#">用户管理</a></li>
				<li style="margin-left: 10px;background-color:dodgerblue;"><a href="#">查询用户</a></li>
			</ul>
			</div>
			<div id="updateInfo">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#">用户管理</a></li>
					<li style="margin-left: 10px;background-color:dodgerblue;"><a href="#" >更新用户</a></li>
				</ul>
			</div>
			<div id="deleteInfo">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#">用户管理</a></li>
					<li style="margin-left: 10px;background-color:dodgerblue;"><a href="#">删除用户</a></li>
				</ul>
			</div>
		</div>
		
	
	</div>
</div>

<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/sweetalert2.all.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/request.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			seen:true,
			username:''
		},
		computed:{
			calcuLength:function(){
				return this.username.length
			}
		}
	});
</script>
</body>
</html>